<script setup>
/**
 * & 文件引入区域
 */

import { onMounted, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { payItemOrder, getItemOrderDetail } from "@/server/api/itemApi";
import { payShopOrder } from "@/server/api/shopApi";
import { orderStatus } from "@/stores/payStore";
import { ToastFun } from "@/hook/toast";
import { getJWTFun } from "@/hook/jsrsasign";
import { getInfoAPI } from "@/server/api/userInfo";
import { debounce } from "@/utils/debounce"
import { useI18n } from "vue-i18n";
const { t } = useI18n();
/**
 * & 注册区
 */



/**
 * & 变量声明区
 */
const router = useRouter();
const route = useRoute();
let payOrderReq; // 支付订单接口请求体
let orderInfo = ref(); // 订单详情数据
const time = ref(10 * 60 * 1000);
const isLoading = ref(false);
/**
 * & 函数区
 */
// 跳转到完成页面

// 支付按钮点击处理
const toPayed = async () => {
  if (isLoading.value) return; // 防止重复点击
  try {
    isLoading.value = true; // 开始请求，禁用按钮
    ToastFun("Loading", { duration: 0 });

    const { data } = await getInfoAPI(orderStatus().itmePayReq.uid);

    if (data.code === 200) {
      const balanceEnough = data.data.pointBalance >= orderStatus().itmePayReq.payPointSum;

      if (balanceEnough) {
        await payItemOrderFun();
      } else {
        ToastFun("show", { msg: t("pay.failReason2") });
      }
    } else {
      ToastFun("", {});
    }
  } catch (error) {
    ToastFun("fail", { msg: t("pay.fail3") });
  }
};



// 网店商品支付下单接口
const payItemOrderFun = async () => {
  try {
    console.log(orderStatus().itmePayReq, "下单")
    let token = getJWTFun(orderStatus().itmePayReq);
    const { data } = await payItemOrder(token);
    if (data.code === 200) {
      ToastFun("show", { msg: t("pay.success") });
      router.push({
        path: "/itemPayed",
        query: {
          id: orderStatus().itmePayReq.orderIdArray[0],
          payPointSum: orderStatus().itmePayReq.payPointSum,
        },
      });
    } else {
      ToastFun("show", { msg: t("pay.fail4"), duration: 2000 });
      setTimeout(() => {
        router.push("/HomeList");
      }, 2000);
    }
  } catch (error) {
    ToastFun("fail", { msg: t("pay.fail3") });
  } finally {
    isLoading.value = false; // 请求结束，启用按钮
  }
};

const debounceToPayedFun = debounce(toPayed, 1000);

// 订单的详情接口
const getItemOrderDetaFun = async (id) => {
  let { data } = await getItemOrderDetail(id);

  orderInfo.value = {
    ...data.data,
    ...orderStatus().itmePayReq,
  };

  console.log("订单的详情", orderInfo.value);
};


// 实体店商品支付下单接口
const payShopOrderFun = async () => {
  let token = getJWTFun(payOrderReq);
  console.log(token);

  // 做假加载 轻提示后跳转到对应的支付完成页面
  ToastFun("Loading", { duration: 1000 });

  // 请求接口
  let { data } = await payShopOrder(token);

  if (data.code == 200) {
    ToastFun("", {});
    router.push({
      path: "/itemPayed",
      query: {
        id: payOrderReq.orderId,
        sum: orderInfo.value.transactionAmount,
      },
    });
  } else {
    ToastFun("", {});
  }

  console.log("实体店商品支付下单", data);
};

onMounted(() => {
  // 网店商品订单的详情接口
  getItemOrderDetaFun(orderStatus().itmePayReq.orderIdArray[0]);


});
</script>

<template>
  <div class="skeleton" v-if="!orderInfo">
    <van-skeleton class="skeleton-text" title :row="5" />
    <van-skeleton class="skeleton-text" title :row="5" />
    <van-skeleton class="skeleton-text" title :row="5" />
  </div>

  <div class="pay" v-if="orderInfo">
    <!-- 头部 -->
    <div class="header">
      <div class="left" @click="$router.back()">
        <img src="/images/Shop/hotelBackBtn.png" />
      </div>
      <div class="title">{{ $t("order.payTitle") }}</div>
    </div>

    <!-- 价格 -->
    <div class="price">
      ecny
      <span>{{
        orderInfo.payPointSum
      }}</span>
    </div>

    <!-- 商品信息 -->
    <div class="product-information">
      <!-- 商品名 -->
      <div class="name">
        {{
          orderInfo.commoditySpecification
            ? orderInfo.commoditySpecification
            : $t("order.wait")
        }}
        <span><van-count-down :time="time" format=" mm 分 ss 秒" /></span>
      </div>

      <div class="to" v-if="orderInfo.address">
        <div class="title-to">address</div>

        <div class="text-down">
          <!-- 地址 -->
          <div class="text-to">
            {{ orderInfo.buyerName }}
            {{ orderInfo.address }}
            {{ orderInfo.phone }}
          </div>
        </div>
      </div>
    </div>

    <!-- 支付按钮 -->
    <div class="botton" @click="debounceToPayedFun" :disabled="isLoading">{{ $t("order.pay") }}</div>
  </div>
</template>

<style lang="scss" scoped>
.pay {
  min-height: 100vh;
  max-height: 100vh;
  background-color: rgba(245, 245, 245, 1);

  overflow-y: scroll;

  .header {
    position: relative;

    height: 24rem;
    padding: 16rem 16rem;
    display: flex;
    align-items: center;
    text-align: center;

    .left {
      position: relative;
      z-index: 100;
      width: 24rem;
      height: 24rem;
      line-height: 34rem;

      img {
        width: 24rem;
      }
    }

    .title {
      position: absolute;
      left: 0;
      right: 0;

      height: 28rem;
      line-height: 28rem;
      font-size: 20rem;
      font-weight: 500;
      line-height: 28rem;
      color: rgba(102, 102, 102, 1);
    }
  }

  .price {
    color: rgba(100, 46, 142, 1);
    font-size: 24rem;
    text-align: center;
    margin-top: 86rem;
    margin-bottom: 64rem;

    span {
      font-size: 48rem;
      margin-left: 5rem;
    }
  }

  .product-information {
    background-color: #fff;
    border-radius: 12rem;
    font-size: 16rem;
    padding: 12rem 12rem 10rem;
    margin: 12rem 16rem 27rem 16rem;

    .name {
      align-items: center;
      justify-self: center;
      max-width: 309rem;
      max-height: 48rem;
      font-size: 20rem;
      font-weight: 500;
      line-height: 28rem;
      color: rgba(51, 51, 51, 1);

      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;

      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .to {
      display: flex;
      margin: 55rem 0 18rem;
      font-size: 12rem;
      align-items: center;

      .title-to {
        color: #ccc;
        text-align: center;
      }

      .text-down {
        font-size: 12rem;
        color: #666;
        margin-left: 12rem;

        .text-to {
          max-width: 247rem;
          max-height: 32rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }

  .botton {
    color: #fff;
    background-color: rgba(100, 46, 142, 1);
    font-size: 20rem;
    text-align: center;

    margin: 0 16rem;
    padding: 11rem;
    border-radius: 8rem;

    position: fixed;
    bottom: 30rem;
    left: 0;
    right: 0;
  }
}
</style>
